<template>
	<view>
		<view class="headPicture">
			<image src="../../static/background/headBackground.jpg" mode=""></image>
		</view>
		<view class="container">
			<image class="background" src="https://gd-hbimg.huaban.com/c46ef03b3a30d53d99f07f7971833156763c0b33ff218-xHtCAs_fw480webp" mode=""></image>
			
			<view class="title">本人已报时段：</view>
			
			<view class="time" v-for="item in list">{{item}}</view>
			
			<view class="button">
				请选择你报名的时间
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'7月21号下午时段',
					'7月22号上午时段',
					'7月22号下午时段',
				],
			}
		},
		methods: {
		}
	}
</script>

<style lang="less" scoped>
	.headPicture{
		width: 100%;
		height: 296rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.container{
		width: 100%;
		min-height: 1037rpx;
		position: absolute;
		top: 253rpx;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		background-color: #fff;
		z-index: 1;
		padding-top: 60rpx;
		.title{
			text-align: center;
			font-size: 18px;
			opacity: 1;
			background-color: #FFFfFF;
			z-index: 2;
			width: 90%;
			height: 53rpx;
			margin: auto;
			margin-bottom: 55rpx;
		}
		.time{
			background-color: #F0F5FF;
			z-index: 999;
			width: 90%;
			height: 146rpx;
			box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
			border-radius: 14px;
			margin: auto;
			margin-bottom: 66rpx;
			font-size: 20px;
			text-align: center;
			line-height: 148rpx;
		}
		.button{
			margin: auto;
			margin-top: 124rpx;
			text-align: center;
			line-height: 124rpx;
			border-radius: 50px;
			width: 75%;
			height: 120rpx;
			font-size: 20px;
			color: #fff;
			background-color: #51B4FA;
		}
		
		.background{
			width: 100%;
			height: 1037rpx;
			position: absolute;
			top: 1rpx;
			opacity: 0.6;
			z-index: 0;
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;
		}
	}
</style>

